<template>
  <div class="table-template-box">
    <div class="tab-box">
      <div class="field-management"
           @mouseleave="showList=false">
        <el-button v-show="fieldManagement"
                   @click="showList=!showList">字段管理</el-button>
        <transition name="el-zoom-in-top">
          <div class="param-list theme-bg-color"
               v-show="showList">
            <template v-if="tableColumns.length">
              <el-checkbox v-for="column of tableColumns"
                           v-model="column.isShow"
                           :key="column.label"
                           :label="column.label"
                           @change="changeFileld($event,column)"></el-checkbox>
            </template>
          </div>
        </transition>
      </div>
    </div>

    <el-table v-loading="loading"
              :data="dataList"
              border
              ref="templateTable"
              :cell-style="cellStyle"
              :header-cell-style="headerCellStyle"
              :height="heightNum"
              :highlight-current-row="radio"
              @selection-change="selectionChange"
              @current-change="currentChange"
              @sort-change="sortChange"
              style="width: 100%;height:100%">
      <el-table-column type="selection"
                       v-if="checkbox"
                       align="center"
                       width="55">
      </el-table-column>
      <el-table-column type="index"
                       v-if="index"
                       label="序号"
                       align="center"
                       width="55">
      </el-table-column>
      <template v-for="column of tableColumns">
        <slot :name="`${column.prop}-before`"></slot>
        <el-table-column :key="column.label"
                         :prop="column.prop"
                         :label="column.label"
                         v-if="column.isShow"
                         header-align="center"
                         :min-width="column.width || setWidth(column.label)"
                         :show-overflow-tooltip="true"
                         align="center">
          <template slot-scope="scope">

            <div v-if="column.selectList && column.selectList.length">
              <div v-for="item of column.selectList"
                   :key="item.id">
                <span v-if="scope.row[column.prop] == item.dictValue">{{item.dictName}}</span>
              </div>
            </div>
            <div v-else>{{scope.row[column.prop]}}</div>
          </template>
        </el-table-column>
        <slot :name="`${column.prop}-after`"></slot>
      </template>
      <slot></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    height: {
      type: [String, Number],
      default: '-'
    },
    radio: {
      type: Boolean,
      default: false
    },
    index: {
      type: Boolean,
      default: false
    },
    checkbox: {
      type: Boolean,
      default: false
    },
    tableData: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    fieldManagement: {
      type: Boolean,
      default: false
    },
    selectionChange: {
      type: Function,
      default: () => {}
    },
    currentChange: {
      type: Function,
      default: () => {}
    },
    sortChange: {
      type: Function,
      default: () => {}
    },
    dataList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    dataList () {
      this.$refs.templateTable.doLayout()
    }
  },
  computed: {
    tableColumns () {
      return this.tableData.map(item => {
        return {
          isShow: item.isShow ? item.isShow : true,
          ...item
        }
      })
    },
    heightNum () {
      if (this.height !== '-') {
        return this.height
      }

      if (!this.dataList.length) {
        return 2 * 66
      }

      return (this.dataList.length + 1) * 66
    }
  },
  data () {
    return {
      showList: false,
      headerCellStyle: {
        height: '65px',
        width: '100px'
      },
      cellStyle: {
        height: '65px'
      }
    }
  },
  methods: {
    getTableRef () {
      return this.$refs.templateTable
    },
    setWidth (lable) {
      return lable.length * 25
    },
    changeFileld () {
      this.$forceUpdate()
      this.$nextTick(() => {
        this.$refs.templateTable.doLayout()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.table-template-box {
  width: 100%;
  min-height: 100%;
  .tab-box {
    width: 100%;
    display: flex;
    .field-management {
      position: relative;
      .param-list {
        position: absolute;
        display: flex;
        flex-direction: column;
        padding: 5px 10px 10px 10px;
        max-height: 300px;
        overflow: hidden;
        overflow-y: auto;
        z-index: 1;
      }
    }
  }
}
</style>
<style lang="css">
.el-tooltip__popper {
  max-width: 50%;
}
</style>
